<template>
  <el-dialog
    :before-close="handleClose"
    :title="title === 'add' ? '新增' : '编辑'"
    :visible.sync="dialogVisible"
    width="700px"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      label-width="100px"
    >
      <el-form-item label="礼物名称" prop="gift_name">
        <el-input
          v-model="ruleForm.gift_name"
          placeholder="请输入礼物名称"
          style="width: 80%;"
        ></el-input>
      </el-form-item>
      <el-form-item label="礼物价格" prop="gift_price">
        <el-input
          v-model.number="ruleForm.gift_price"
          placeholder="请输入礼物价格"
          style="width: 80%;"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="礼物图片" prop="picture">
        <el-upload
          :http-request="customizeUpload"
          :on-success="handleSuccessPicture"
          :show-file-list="false"
          action=""
          class="avatar-uploader"
        >
          <img v-if="ruleForm.picture" :src="ruleForm.picture" class="avatar"/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="操作类型">
        <el-select
          v-model="ruleForm.op_type"
          class="mr-4"
          placeholder="操作类型"
        >
          <el-option
            v-for="item in cateOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="ruleForm.op_type === 8" label="礼物动效">
        <div class="flex items-center" style="width:80%">
          <div class="flex flex-col items-center" style="width:33%">
            <el-upload
              :http-request="customizeUpload"
              :on-success="handleSuccessSpecial1"
              :show-file-list="false"
              action=""
              class="avatar-uploader"
            >
              <img
                v-if="suit_special_list[0]"
                :src="suit_special_list[0]"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-button type="danger" @click="handleRemove(0)">删除</el-button>
          </div>
          <div class="flex flex-col items-center" style="width:33%">
            <el-upload
              :http-request="customizeUpload"
              :on-success="handleSuccessSpecial2"
              :show-file-list="false"
              action=""
              class="avatar-uploader"
            >
              <img
                v-if="suit_special_list[1]"
                :src="suit_special_list[1]"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-button type="danger" @click="handleRemove(1)">删除</el-button>
          </div>
          <div class="flex flex-col items-center" style="width:33%">
            <el-upload
              :http-request="customizeUpload"
              :on-success="handleSuccessSpecial3"
              :show-file-list="false"
              action=""
              class="avatar-uploader"
            >
              <img
                v-if="suit_special_list[2]"
                :src="suit_special_list[2]"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-button type="danger" @click="handleRemove(2)">删除</el-button>
          </div>
        </div>
      </el-form-item>

      <el-form-item v-if="ruleForm.op_type === 9" label="概率">
        <el-input
          v-model.number="ruleForm.success_probability"
          placeholder="请输入百分比数字"
          style="width: 80%;"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="special_ids.includes(ruleForm.op_type)" label="特效">
        <el-upload
          :http-request="customizeUpload"
          :on-success="handleSuccessSpecial4"
          :show-file-list="false"
          action=""
          class="avatar-uploader"
        >
          <img v-if="ruleForm.special" :src="ruleForm.special" class="avatar"/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item v-if="special_ids.includes(ruleForm.op_type)" label="震动">
        <el-radio v-model="ruleForm.is_shock" :label="1">有</el-radio>
        <el-radio v-model="ruleForm.is_shock" :label="0">无</el-radio>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.op_type === 9 || ruleForm.op_type === 8"
        label="时长"
      >
        <el-input
          v-model.number="ruleForm.magic_time"
          placeholder="请输入时长，单位为秒"
          style="width: 80%;"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="special_ids.includes(ruleForm.op_type)"
        label="震动延时"
      >
        <el-input
          v-model.number="ruleForm.delay_shock"
          placeholder="请输入延时时长，单位为秒"
          style="width: 80%;"
          type="number"
        ></el-input>
      </el-form-item>

      <el-form-item label="上下架状态" prop="sale_status">
        <el-radio v-model="ruleForm.sale_status" :label="1">上架</el-radio>
        <el-radio v-model="ruleForm.sale_status" :label="0">下架</el-radio>
      </el-form-item>
      <el-form-item label="礼物心动值" prop="gift_cardiac">
        <el-input
          v-model.number="ruleForm.gift_cardiac"
          placeholder="请输入礼物心动值(可为负数)"
          style="width: 80%;"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="礼物说明">
        <el-input
          v-model="ruleForm.gift_desc"
          :rows="3"
          placeholder="最多15个字"
          style="width: 80%;"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item label="链接">
        <el-input
          v-model="ruleForm.gift_url"
          placeholder="请输入链接"
          style="width:80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="礼物标签">
        <el-select
          v-model="tags_selected_list"
          multiple
          placeholder="请选择标签"
          @change="handleChange"
        >
          <el-option
            v-for="item in tagsOption"
            :key="'标签' + item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="礼物排序" prop="sort">
        <el-input
          v-model.number="ruleForm.sort"
          placeholder="请输入排序"
          style="width: 80%;"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="展示礼物墙" prop="is_show_in_wall">
        <el-radio v-model="ruleForm.is_show_in_wall" :label="1">是</el-radio>
        <el-radio v-model="ruleForm.is_show_in_wall" :label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="礼物墙状态">
        <el-input
          v-model="ruleForm.wall_status"
          placeholder="请输入礼物墙状态"
          style="width: 80%;"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="礼物墙说明">
        <el-input
          v-model="ruleForm.wall_desc"
          placeholder="请输入礼物墙说明"
          style="width: 80%;"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <!-- :loading="submitLoading" -->
      <el-button type="primary" @click="handleSubmit('ruleForm')"
      >提交</el-button
      >
    </span>
  </el-dialog>
</template>

<script>


import { getCateData, getDataDetail, getTagData } from '@/api/roomGift/giftList'

import { getTypeData, postData, putData } from '@/api/roomGift/magicGift'

export default {
  name: '',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'add'
    },
    id: {
      type: Number
    }
  },
  data() {
    return {
      /**图片上传 */



      /**礼物类别 */
      categoryOption: [],
      /**礼物标签 */
      tagsOption: [],
      /**选择的礼物标签 */
      tags_selected_list: [],
      /** 操作类型 */
      cateOptions: [],

      /**动效 */
      suit_special_list: [],

      /**弹幕 */
      Bullet_screen: [],

      /**特效 */
      special_ids: [10, 11],

      ruleForm: {
        id: undefined,
        op_type: undefined,
        gift_name: undefined,
        gift_price: undefined,
        picture: undefined,
        special: undefined,
        gift_cardiac: undefined,
        sort: undefined,
        sale_status: undefined,
        gift_desc: undefined,
        gift_url: undefined,
        is_show_in_wall: undefined,
        wall_status: undefined,
        wall_desc: undefined,
        gift_tag_ids: undefined,
        special_list: undefined,
        magic_time: undefined,
        success_probability: undefined,
        is_shock: undefined,
        delay_shock: undefined
      },
      rules: {
        category_id: {
          required: true,
          message: '请选择礼物类别',
          trigger: 'change'
        },
        gift_name: {
          required: true,
          message: '请输入礼物名称',
          trigger: 'blur'
        },
        gift_price: {
          required: true,
          message: '请输入礼物价格',
          trigger: 'blur'
        },
        picture: {
          required: true,
          message: '请上传礼物图片',
          trigger: 'change'
        },
        special: {
          required: true,
          message: '请上传礼物动效',
          trigger: 'change'
        },
        gift_cardiac: {
          required: true,
          message: '请输入礼物心动值',
          trigger: 'blur'
        },
        sort: { required: true, message: '请输入礼物排序', trigger: 'blur' },
        sale_status: {
          required: true,
          message: '请选择上下架状态',
          trigger: 'change'
        },
        gift_desc: {
          required: true,
          message: '请输入礼物说明',
          trigger: 'blur'
        },
        gift_size: {
          required: true,
          message: '请选择礼物尺寸',
          trigger: 'change'
        },
        is_show_in_wall: {
          required: true,
          message: '请选择是否在礼物墙展示',
          trigger: 'change'
        },
        wall_status: {
          required: true,
          message: '请输入礼物名称',
          trigger: 'blur'
        },
        gift_tag_ids: {
          required: true,
          message: '请选择礼物标签',
          trigger: 'change'
        }
      }
    }
  },
  watch: {
    tags_selected_list: function(newValue, oldValue) {
      this.ruleForm.gift_tag_ids = newValue.join(',')
    },
    title: async function(newValue, oldValue) {
      if (newValue === 'edit') {
        let detail = await getDataDetail(this.id)

        this.ruleForm.id = this.id
        this.ruleForm.gift_name = detail.data.name
        this.ruleForm.gift_price = detail.data.price
        this.ruleForm.picture = detail.data.picture
        this.ruleForm.op_type = detail.data.op_type

        // if (this.ruleForm.op_type === 8) {
        //   this.special_list = detail.data.special_list.join(",");
        //   this.suit_special_list = detail.data.special_list;
        // } else
        if (detail.data.magic_ext) {
          let magic_ext = JSON.parse(detail.data.magic_ext)
          this.ruleForm.success_probability = magic_ext.success_probability
          this.ruleForm.magic_time = magic_ext.magic_time
          this.ruleForm.is_shock = magic_ext.is_shock
          this.ruleForm.delay_shock = magic_ext.delay_shock
          this.suit_special_list = magic_ext.special_list
        }

        this.ruleForm.sort = detail.data.sort
        this.ruleForm.sale_status = detail.data.sold
        this.ruleForm.gift_desc = detail.data.desc
        this.ruleForm.gift_cardiac = detail.data.cardiac
        this.ruleForm.is_show_in_wall = detail.data.is_show_in_wall
        this.ruleForm.wall_status = detail.data.wall_status
        this.ruleForm.wall_desc = detail.data.get_method_desc
        this.ruleForm.gift_url = detail.data.url
        this.tags_selected_list = detail.data.tag_ids
          ? detail.data.tag_ids
          : []
        this.ruleForm.special = detail.data.special
      }
    }
  },
  created() {
    this.handleGetCate()
    this.handleGetTag()
    this.handleGetTypeData()
  },

  methods: {
    /**获取礼物分类 */
    handleGetCate() {
      getCateData().then(res => {
        this.categoryOption = res.data
      })
    },
    /**获取礼物标签 */
    handleGetTag() {
      getTagData().then(res => {
        this.tagsOption = res.data
      })
    },
    /**获取操作类型 */
    handleGetTypeData() {
      getTypeData().then(res => {
        this.cateOptions = res.data
      })
    },

    /**礼物图片上传 */
    handleSuccessPicture() {
      this.ruleForm.picture = this.ossLastImgUrl
    },
    /**礼物动效上传 */
    handleSuccessSpecial1() {
      this.suit_special_list.push(this.ossLastImgUrl)
    },
    handleSuccessSpecial2() {
      this.suit_special_list.push(this.ossLastImgUrl)
    },
    handleSuccessSpecial3() {
      this.suit_special_list.push(this.ossLastImgUrl)
    },
    handleSuccessSpecial4() {
      this.ruleForm.special = this.ossLastImgUrl
    },
    handleRemove(index) {
      this.suit_special_list.splice(index, 1)
    },

    /**礼物标签最多选择两个 */
    handleChange(value) {
      if (value.length > 2) {
        this.tags_selected_list = value.slice(0, 2)
      }
    },

    handleSubmit(formName) {
      let data = {}
      for (let key in this.ruleForm) {
        if (key === 'gift_tag_ids') {
          data[key] = this.tags_selected_list.join(',')
        } else {
          data[key] = this.ruleForm[key]
        }
      }

      if (data.op_type === 8) {
        data.special_list = this.suit_special_list.join(',')
      }

      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res
          if (this.title === 'add') {
            res = await postData(data)
          } else {
            res = await putData(data)
          }
          if (res.code === 200) {
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            })
            this.$emit('update:title', 'add')
            this.$emit('update:dialogVisible', false)
            this.$emit('updateTable')
            this.handleClose()
          }
        } else {

          return false
        }
      })
    },

    handleClose() {
      this.ruleForm = {
        id: undefined,
        op_type: undefined,
        gift_name: undefined,
        gift_price: undefined,
        picture: undefined,
        special: undefined,
        gift_cardiac: undefined,
        sort: undefined,
        sale_status: undefined,
        gift_desc: undefined,
        gift_url: undefined,
        is_show_in_wall: undefined,
        wall_status: undefined,
        wall_desc: undefined,
        gift_tag_ids: undefined,
        special_list: undefined,
        magic_time: undefined,
        success_probability: undefined,
        is_shock: undefined,
        delay_shock: undefined
      }

      this.$refs.ruleForm.resetFields()

      this.$emit('update:title', 'add')

      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.avatar-uploader .el-upload {
  border        : 1px dashed #d9d9d9;
  border-radius : 6px;
  cursor        : pointer;
  position      : relative;
  overflow      : hidden;
}

.avatar-uploader .el-upload:hover {
  border-color : #409eff;
}

.avatar-uploader-icon {
  font-size   : 28px;
  color       : #8c939d;
  width       : 100px;
  height      : 100px;
  line-height : 100px;
  text-align  : center;
}

.avatar {
  width   : 100px;
  height  : 100px;
  display : block;
}

::v-deep .lu-input {
  width : 300px !important;
}
</style>
